<template>
  <div class="orderDetail">
    <header-bar :title="type==1?'卖出详情':'买入详情'"></header-bar>
    <div class="orderDetail-body">
      <div class="bgfff">
        <div class="top-body" :class="{'padingb10':!detail.logisticsInfo&&type==1}">
          <div class="order-state">
            <div class="state-left">
              <p v-if="type==1">{{detail.orderFlag!="REFUND"?orderFlagSell[detail.orderFlag]:refundFlag[detail.refundFlag]}}</p>
              <p v-if="type==2">{{detail.orderFlag!="REFUND"?orderFlagBuy[detail.orderFlag]:refundFlag[detail.refundFlag]}}</p>
              <p v-if="type==2&&detail.orderFlag!='WAIT_PAY'&&detail.orderFlag!='PAY_FAILED'||type==1">{{detail.orderFlag!="CANCEL"&&detail.orderFlag!="EXPIRE"?((detail.orderFlag=="REFUND"&&detail.refundFlag=="SUCC")?'退款成功':orderStatusInfo[detail.orderFlag]):(orderStatusInfo[detail.orderFlag]+detail.cancelRemark)}}</p>
              <p v-else-if="type==2&&(detail.orderFlag=='WAIT_PAY'||detail.orderFlag=='PAY_FAILED')">
                <span ref="createTime">{{detail.gmtCreate | countDown(reload,getThis,'createTime',detail.expireTime)}}</span>
                <span>后未支付自动取消订单</span>
              </p>
            </div>
            <!-- <img src="~@/assets/imgs/account/shipped.png" /> -->
          </div>
        </div>
      </div>

      <div class="orderDetail-bgfff">
        <div class="now-address" :class="{'px1bt':detail.logisticsInfo&&type==2}" @click="logisticsInfo(detail)" v-if="detail.logisticsInfo">
            <img class="left-icon" src="~@/assets/imgs/account/car.png" />
            <div class="address-content">
              <p>{{detail.logisticsInfo}}</p>
              <p>{{detail.logisticsTime}}</p>
            </div>
            <img class="right-icon" src="~@/assets/imgs/common/right_arrow_icon.png" />
        </div>
      </div>
      <div class="orderDetail-bgfff">
        <div class="buy-address" v-if="type==2" :class="{'px1bt':detail.logisticsInfo}">
          <img src="~@/assets/imgs/account/address.png" />
          <div class="address-content">
            <p><span class="name">{{detail.receiverName}}</span><span class="phone">{{detail.receiverPhone|mobileSecretFormat}}</span></p>
            <p>{{detail.deliveryAddress}}</p>
          </div>
        </div>
      </div>
      <div class="goods orderDetail-bgfff margin-top10" @click="goodsDetail" v-lockClick>
        <img :src="detail.goodsImg" />
        <div class="con-right">
          <div class="goods-tit">{{detail.goodsName}}</div>
          <div class="goods-specifications">{{detail.goodsSpec}}</div>
          <div class="goods-amonut">
            <div>¥</div>
            <div>{{detail.goodsPrice}}</div>
            

          </div>
        </div>
      </div>
      <div class="orderDetail-bgfff">
        <ul class="order-cost px1bt">
            <li>
              <p>商品总额</p>
              <p>
                <span>¥</span>{{detail.goodsPrice}}
              </p>
            </li>
            <li>
              <p>运费</p>
              <p>
                <span>¥</span>{{detail.fee}}
              </p>
            </li>
            <li class="flexend">
              <p>实付款:</p>
              <p>
                <span>¥</span>{{detail.dealPrice}}
              </p>
            </li>
        </ul>
      </div>
      <div class="orderDetail-bgfff" v-if="type==2&&version100">
        <div class="chat px1bt" @click="goChat">
          <img src="~@/assets/imgs/account/chat.png">
          <span>联系卖家</span>
        </div>
      </div>
      <div class="buy-info orderDetail-bgfff margin-top10" v-if="type==1">
          <div class="buy-title">
              <span>买家信息</span>
              <div class="buy-title-right" @click="copy">
                  <img src="~@/assets/imgs/account/copy.png">
                  <span>复制信息</span>
              </div>
          </div>
          <ul>
              <li>
                  <div class="buy-item-left">收货人</div>
                  <div class="buy-item-right">{{detail.receiverName}}</div>
              </li>
              <li>
                  <div class="buy-item-left">手机号</div>
                  <div class="buy-item-right">{{detail.receiverPhone}}</div>
              </li>
              <li>
                  <div class="buy-item-left">收货地址</div>
                  <div class="buy-item-right">{{detail.deliveryAddress}}</div>
              </li>
          </ul>
      </div>
      <div class="orderDetail-bgfff" v-if="type==1&&version100">
        <div class="chat px1bt" @click="goChat">
          <img src="~@/assets/imgs/account/chat.png">
          <span>联系买家</span>
        </div>
      </div>
      <ul class="order-items">
          <li>
              <div class="item-tit">
                  订单编号
              </div>
              <div class="item-con">
                  {{detail.orderNo}}
              </div>
          </li>
          <li>
              <div class="item-tit">
                  下单时间
              </div>
              <div class="item-con">
                  {{detail.gmtCreate}}
              </div>
          </li>
          <li>
              <div class="item-tit">
                  支付时间
              </div>
              <div class="item-con">
                  {{detail.payTime?detail.payTime:'-'}}
              </div>
          </li>
          <li>
              <div class="item-tit">
                  发货时间
              </div>
              <div class="item-con">
                  {{detail.deliveryTime?detail.deliveryTime:'-'}}
              </div>
          </li>
          <li>
              <div class="item-tit">
                  成交时间
              </div>
              <div class="item-con">
                  {{detail.confirmTime?detail.confirmTime:'-'}}
              </div>
          </li>
      </ul>

      <div class="fixed-bottom" v-if="btoomBtn">
          <div class="fixed-bottom-h"></div>
          <div class="fix_iphonex"></div>
          <div class="fixed-bottom-bg fix_iphonex" v-if="type==1">
            <span class="green" v-if="detail.orderFlag=='WAIT_SEND'" @click.stop="logistics(detail)">去发货</span>
            <span v-if="detail.orderFlag=='WAIT_RECEIVE'" @click.stop="logisticsInfo(detail)">查看物流</span>
            <span class="green-border" v-if="detail.orderFlag=='REFUND'&&detail.refundFlag=='APPLY'" @click.stop="refund(detail,'REFUSE')">拒绝退款</span>
            <span class="green-border" v-if="detail.orderFlag=='REFUND'&&detail.refundFlag=='APPLY'" @click.stop="refund(detail,'AGREE')">同意退款</span>
            <div class="width15"></div>
          </div>
          <div class="fixed-bottom-bg fix_iphonex" v-if="type==2">
              <span v-if="detail.orderFlag=='WAIT_PAY'||detail.orderFlag=='PAY_FAILED'" @click.stop="cancleOrder(detail)">取消订单</span>
              <span class="green" v-if="detail.orderFlag=='WAIT_PAY'||detail.orderFlag=='PAY_FAILED'" @click.stop="pay(detail)" v-lockClick>去支付</span>
              <span v-if="detail.orderFlag=='WAIT_SEND'" @click.stop="applyRefund(detail)">申请退款</span>
              <span v-if="detail.orderFlag=='WAIT_RECEIVE'||detail.orderFlag=='FINISHED'" @click.stop="afterSale(detail)">申请售后</span>
              <span v-if="detail.orderFlag=='WAIT_RECEIVE'" @click.stop="logisticsInfo(detail)">查看物流</span>
              <span class="green" v-if="detail.orderFlag=='WAIT_RECEIVE'" @click="receivedGoods(detail)">确认收货</span>
              <div class="width15"></div>
          </div>

      </div>
    </div>
    <payModel :visible.sync="popVisible" @payType="payType"></payModel>
  </div>
</template>
<script>
import HeaderBar from "@/components/header.vue";
import payModel from './payModel';
import { mapState, mapActions } from "vuex";
import native from '@/libs/native';
import orderMixins from './orderMixins';
export default {
  mixins:[orderMixins],
  data() {
    return {
      type:"1",
      orderId:'',
      detail:{},
      orderFlagSell:{
          "WAIT_PAY":"待付款",
          "PAYING":"待付款",
          "PAY_FAILED":"待付款",
          "WAIT_SEND":"待发货",
          "WAIT_RECEIVE":"待收货",
          "CANCEL":"已取消",
          "EXPIRE":"已取消",
          "FINISHED":"已完成",
          "REFUND":"退款中",
      },
      orderFlagBuy:{
          "WAIT_PAY":"待付款",
          "PAYING":"支付中",
          "PAY_FAILED":"待付款",
          "WAIT_SEND":"待发货",
          "WAIT_RECEIVE":"待收货",
          "CANCEL":"已取消",
          "EXPIRE":"已取消",
          "FINISHED":"已完成",
          "REFUND":"退款中",
      },
      orderStatusInfo:{
          "WAIT_PAY":"等待买家付款",
          "PAYING":"请耐心等待",
          "PAY_FAILED":"等待买家付款",
          "WAIT_SEND":"等待卖家发货",
          "WAIT_RECEIVE":"等待买家确认收货",
          "CANCEL":"关闭原因：",
          "EXPIRE":"关闭原因：",
          "FINISHED":"感谢您对闲巢二手的支持",
          "REFUND":"订单正在售后处理中",
      },
      refundFlag:{
          "SUCC":"已退款",
          "REFUSE":"退款中",
          "APPLY":"退款中",
          "PROCE":"退款中",
          "FAIL":"退款中",
      },
      // popVisible:false,
    }
  },
  components: {
    HeaderBar,
    payModel,
  },
  created() {
    this.orderId = this.$route.query.orderId;
    this.type = this.$route.query.type||'1';
    this.getOrderDetail();
  },
  computed: {
    btoomBtn(){
      if(this.type==1&&(this.detail.orderFlag=='WAIT_SEND'||this.detail.orderFlag=='WAIT_RECEIVE'||(this.detail.orderFlag=='REFUND'&&this.detail.refundFlag=='APPLY'))){
        return true;
      }
      if(this.type==2&&(this.detail.orderFlag=='WAIT_PAY'||this.detail.orderFlag=='PAY_FAILED'||this.detail.orderFlag=='WAIT_SEND'||this.detail.orderFlag=='WAIT_RECEIVE'||this.detail.orderFlag=='FINISHED')){
        return true;
      }
      return false;
    },
  },
  methods: {
    ...mapActions(['toggleLoading','showMsg','showModal']),
    getOrderDetail(){
      this.toggleLoading({flag:true});
      this.$ajax.orderDetail(this.orderId).then(res=>{
        this.toggleLoading({flag:false});
        if(res.code=='0000'){
          let intervaNumS = sessionStorage.getItem('countDownIntervaNumS');
          if(intervaNumS){
            intervaNumS = JSON.parse(intervaNumS);
          }else{
            intervaNumS = [];
          }
          intervaNumS.forEach(item => {
            clearInterval(item)
          });
          sessionStorage.removeItem('countDownIntervaNumS')
          this.detail = res.data;
        }
      })
    },
    //复制
    copy(){
      native.copy(this.detail.receiverName+' '+this.detail.receiverPhone+' '+ this.detail.deliveryAddress);
    },
    //商品详情
    goodsDetail(){
      native.goGoodsDetail(this.detail.goodsId);
    },
    getThis(){
        return this;
    },
    reload(){
        this.getOrderDetail();
    },
    //去聊天
    goChat(){
      native.goChat(this.type==1?this.detail.buyerPhone:this.detail.sellerPhone)
    },
  },
};
</script>
<style lang="less" scoped>
.orderDetail {
  background: #f6f6f6;
  min-height: 100%;
  .orderDetail-body {

    .orderDetail-bgfff,.top-body {
      padding: 0 .24rem;
      background: #fff;
      .order-state {
        background:linear-gradient(144deg,rgba(36,219,120,1) 0%,rgba(9,185,103,1) 100%);
        border-radius: 0.1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 1.64rem;
        flex: 1;
        padding: 0 0.5rem 0 0.4rem;
        .state-left {
          p {
            color: #fff;
            &:nth-child(1) {
              font-size: 0.36rem;
            }
            &:nth-child(2) {
              font-size: 0.24rem;
            }
          }
        }
        & > img {
          width: 0.84rem;
          height: 0.84rem;
        }
      }
      .now-address {
        display: flex;
        align-items: center;
        padding: 0.24rem 0;
        .left-icon {
          width: 0.4rem;
        }
        .address-content {
          flex: 1;
          margin-left: 0.16rem;
          p {
            width: 5.8rem;
            font-weight: 400;
            &:nth-child(1) {
              font-size: 0.26rem;
              color: #4a505c;
              line-height: 0.36rem;
            }
            &:nth-child(2) {
              font-size: 0.24rem;
              color: #999;
              line-height: 0.34rem;
              margin-top: 0.06rem;
            }
          }
        }
        .right-icon {
          width: 0.16rem;
        }
      }
      .buy-address{
        display: flex;
        align-items: center;
        padding: .3rem 0;
        img{
          width: .4rem;
          height: .4rem;
        }
        .address-content{
          padding: 0 .4rem 0 .2rem;
          flex: 1;
          p{
            &:nth-child(1){
              color: #333333;
              font-size: .28rem;
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: .1rem;
            }
            &:nth-child(2){
              font-size: .24rem;
              color: #999999;
            }
          }
        }
      }
    }
    .top-body{
      padding: .2rem 0 0;
      margin:  0 .24rem;
      &.padingb10{
        padding-bottom: .2rem;
      }
    }
    .bgfff{
      background: #fff;
    }
    .margin-top10 {
      margin-top: 0.2rem;
    }
    .goods {
      display: flex;
      padding: .2rem .24rem;
      img {
        width: 1.6rem;
        height: 1.6rem;
        background: #fafafa;
      }
      .con-right {
        margin-left: 0.2rem;
        width: 5rem;
        font-size: 0.28rem;
        color: #333;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .goods-tit {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .goods-specifications {
          font-size: 0.24rem;
          color: #999;
          margin: 0.1rem 0;
        }
        .goods-amonut {
          display: flex;
          align-items: flex-end;
          height:.4rem;
          div{
              font-weight:400;
              &:nth-child(1){
                  color: #FF4137;
                  font-size: .24rem;
                  line-height:.32rem;
              }
              &:nth-child(2){
                  margin-left: .02rem;
                  line-height:.4rem;
                  color: #FF4137;
                  font-size: .32rem;
              }
          }
        }
      }
    }
    .order-cost{
      // margin: 0 .24rem;
      padding: .2rem 0;
      &>li{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .1rem 0;
        p{
          font-size: .28rem;
          &:nth-child(1){
            line-height: .4rem;
            color: #999999;
            padding-right: .1rem;
          }
          &:nth-child(2){
            span{
              font-size: .24rem;
              padding-right: .02rem;
            }
            line-height: .36rem;
            color: #333;
          }
        }
        &.flexend{
          justify-content: flex-end;
          p{
            &:nth-child(2){
              line-height: .44rem;
              font-size: .36rem;
            }
          }
        }
      }
    }
    .buy-info{
        padding: .2rem .24rem .3rem;
        .buy-title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            &>span{
                font-size: .28rem;
                color: #333;
            }
            .buy-title-right{
                display: flex;
                align-items: center;
                img{
                    width: .32rem;
                }
                span{
                    font-size: .24rem;
                    color: #999;
                    margin-left: .04rem;
                }
            }
        }
        &>ul{
            &>li{
                margin-top: .24rem;
                display: flex;
                align-items: center;
                // justify-content: space-between;
                font-size: .28rem;
                line-height:.4rem;
                .buy-item-left{
                    color: #999;
                    width: 1.32rem;
                }
                .buy-item-right{
                    color: #333;
                    width: 5.34rem;
                }
            }
        }
    }
    .chat{
      // margin: 0 .24rem;
      display: flex;
      align-items: center;
      justify-content: center;
      height: .88rem;
      img{
        width: .36rem;
        height: .36rem;
      }
      span{
        color: #999999;
        line-height:.36rem;
        margin-left: .04rem;
      }
    }
    .order-items{
        margin-top: .26rem;
        padding: 0 .24rem;
        &>li{
            padding-bottom: .3rem;
            display: flex;
            align-items: center;
            color: #999;
            font-size: .24rem;
            .item-tit{
            }
            .item-con{
                margin-left: .2rem;
            }
        }
    }
    .fixed-bottom{
        
        .fixed-bottom-h{
            height: .96rem;
        }
        .fixed-bottom-bg{
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: flex-end;
            height: .96rem;
            align-items: center;
            background: #fff;
            // padding-right: .3rem;
            .width15{
              width: .3rem;
            }
            span{
                color: #333;
                border: .02rem solid #ddd;
                width: 1.6rem;
                height: .56rem;
                border-radius: .56rem;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: .2rem;
                font-size: .26rem;
                &.green{
                    color: #fff;
                    background: #14C878;
                    border: .02rem solid #14C878;
                }
                &.green-border{
                    color:#14C877;
                    border: .02rem solid #14C877;
                }
            }
        }
    }
  }
}
</style>